<template>
  <div>
    <el-badge :value="messageTotle" :max="99">
      <el-popover
        placement="right"
        width="400"
        v-model="popoverVisible"
        trigger="click">
        <div class="msg">
          <el-card class="box-card">
            <div class="read">
              <div><i class="el-icon-message-solid icon"></i></div>
              <div><el-link :underline="false" @click="batchReadMessage()">知道了</el-link></div>
            </div>
          </el-card>
          <el-card class="box-card" style="cursor: pointer;" v-for="(data,index) in messageList" :key="data.id" >
            <div class="title">
              <div>{{data.title}}</div>
              <div>{{ parseTime(data.createTime) }}</div>
            </div>
            <span style="cursor: pointer;" v-if="data.status === 0" @click="readMessage(data,index)">
            <i class="el-icon-message icon"></i>{{data.messageContent}}
          </span>
            <span v-else-if="data.status === 1" style="color: #ccc;">
            <i class="el-icon-message icon"></i>{{data.messageContent}}
          </span>
          </el-card>
          <el-card class="box-card" style="cursor: pointer;">
            <center @click="clickMessage()">查看更多消息<i class="el-icon-d-arrow-right"></i></center>
          </el-card>
        </div>
        <svg-icon slot="reference" icon-class="remind2"/>
      </el-popover>
    </el-badge>
  </div>
</template>

<script>
import { readMessage, batchReadMessage } from "@/api/oa/message"
import store from '@/store'
export default {
  name: "OaMsg",
  data() {
    return {
      popoverVisible: false
    }
  },
  computed: {
    messageList() {
      if (store.state.oaMessage.list !== null && typeof store.state.oaMessage.list !== 'undefined') {
        return store.state.oaMessage.list;
      } else {
        return [];
      }
    },
    messageTotle() {
      if (store.state.oaMessage.total !== null && typeof store.state.oaMessage.total !== 'undefined') {
        return store.state.oaMessage.total;
      } else {
        return 0;
      }
    }
  },
  methods: {
    //查看更多消息
    clickMessage(){
      this.$router.push("/system/oa/message");
      this.popoverVisible = false;
    },
    //阅读通知
    readMessage(data,index){
      readMessage(data.id).then(response=>{
        if(response.code===200 && data.status === 0){
          store.state.oaMessage.list[index].status = 1
          store.state.oaMessage.total = store.state.oaMessage.total - 1
        }
      })
    },
    //批量阅读通知
    batchReadMessage(){
      batchReadMessage().then(res => {

      }).catch(error => {
        console.dir(error)
      })
      store.state.oaMessage.total = 0
      store.state.oaMessage.list = this.messageList.forEach(e=>{
        e.status = 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.msg{
  font-size: 10px;
}
.icon{
  font-size:20px;
  vertical-align: middle;
  padding-right: 10px;
}
.read{
  display: flex;
  justify-content: space-between;
}
.title{
  display: flex;
  justify-content: space-between;
  padding: 0px 0 10px 0;
  font-size: 13px;
  font-weight: 900;
}
::v-deep .el-badge__content.is-fixed {
  margin-top: 7px;
}
</style>
